<template>
  <div>
    <el-dialog
      title="新增设备"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="90px">
        <el-form-item size="small" label="设备编码" prop="imei">
          <el-input
            oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
            @blur="addForm.imei = $event.target.value"
            clearable
            v-model.trim="addForm.imei"
            placeholder="请输入"
            maxlength="25"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="产品类型" prop="productId">
          <el-select
            v-model="addForm.productId"
            placeholder="请选择"
            style="width: 100%"
            @change="onChange"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- v-if="flag" -->
        <el-form-item size="small" label="产品型号" prop="classMark">
          <el-select
            size="small"
            style="width: 100%"
            v-loadMore="loadMore2"
            v-model="addForm.classMark"
            placeholder="请选择"
            @change="onChange2"
          >
            <el-option
              v-for="item in classMarkList"
              :label="item.model"
              :value="item.model"
              :key="item.id"
            >
            </el-option>
            <div
              class="div_box"
              v-loading="loading2"
              :style="loading2 ? '' : 'display: none;'"
            ></div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="通信协议" prop="protocol">
          <el-select
            v-model="addForm.protocol"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in protocolList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item size="small" label="产品型号" prop="classMark" v-if="classMarflag">
          <el-select v-model="addForm.classMark" placeholder="请选择产品型号" style="width: 330px">
            <el-option v-for="item in classMarkList" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item size="small" label="厂商" prop="manufacturerId">
          <el-select filterable v-model="addForm.manufacturerId" placeholder="请选择厂商" style="width: 330px">
            <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item
          size="small"
          label="设备ID"
          v-if="selectedItem.deviceType != 'Camera'"
        >
          <el-input
            clearable
            v-model="addForm.deviceId"
            placeholder="请输入"
            @blur="addForm.deviceId = $event.target.value"
            maxlength="40"
            oninput="value=value.replace(/[\W]/g,'')"
            >></el-input
          >
        </el-form-item>
        <el-form-item
          size="small"
          label="序列号"
          v-if="selectedItem.deviceType == 'Camera'"
          prop="sn"
        >
          <el-input
            clearable
            v-model="addForm.sn"
            placeholder="请输入"
            maxlength="50"
            oninput="value=value.replace(/[^A-Za-z0-9:]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item
          size="small"
          label="设备MAC"
          v-if="selectedItem.deviceType != 'Camera'"
        >
          <el-input
            clearable
            v-model="addForm.deviceMac"
            placeholder="请输入"
            maxlength="50"
            oninput="value=value.replace(/[^A-Za-z0-9:]/g,'')"
            >></el-input
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqProductList,
  reqTerminalAdd,
  reqManufacturerList,
  reqProductModelPage,
} from "@api/api.js";
import { validateImei } from "@utils/validate";
import loadMore from "@mixin/loadMore";

export default {
  mixins: [loadMore],
  data() {
    return {
      flag: false,
      dialogVisible: false,
      productList: [],
      protocolList: [
        {
          id: 1,
          name: "电信物模型标准规范",
        },
        {
          id: 2,
          name: "移动铠湾规范",
        },
        {
          id: 3,
          name: "移动安消规范",
        },
        {
          id: 6,
          name: "声光规范",
        },
        {
          id: 7,
          name: "珠海慧芯",
        },
      ],
      labelName: "设备MAC",
      // classMarkList: [
      //   {
      //     name: "YL-IOT-MC01"
      //   }, {
      //     name: "YL-IOT-A0"
      //   }, {
      //     name: "YL-IOT-MC-S"
      //   }
      // ],
      // classMarflag: false,
      manufacturerList: [],
      addForm: {
        deviceId: "",
        deviceMac: "",
        imei: "",
        productId: "",
        classMark: "",
        protocol: "",
        sn: "",
      },
      rules: {
        deviceId: [
          { required: true, message: "请输入设备ID", trigger: "blur" },
        ],
        classMark: [
          { required: true, message: "请输入产品型号", trigger: "change" },
        ],
        imei: [
          { required: true, message: "请输入设备编码", trigger: "blur" },
          { validator: validateImei },
        ],
        sn: [{ required: true, message: "请输入序列号", trigger: "blur" }],
        productId: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
        protocol: [
          { required: true, message: "请选择通信协议", trigger: "change" },
        ],
      },
      classMarkList: [],
      sysInstanceIndex2: 1,
      sysInstanceTotalPages2: 10,
      loading2: false,
      selectedItem: {
        deviceType: "1",
      },
    };
  },
  mounted() {},
  methods: {
    // 获取产品型号
    async ProductModelPage() {
      let res = await reqProductModelPage(this.sysInstanceIndex2, 10, {
        productId: this.addForm.productId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages2 = res.data.total;
      this.classMarkList = [...this.classMarkList, ...res.data.rows];
    },
    async loadMore2() {
      if (this.sysInstanceIndex2 >= Math.ceil(this.sysInstanceTotalPages2 / 10))
        return;
      this.sysInstanceIndex2++;
      this.loading2 = true;
      // 获取列表数据的方法
      await this.ProductModelPage();
      this.loading2 = false;
    },
    onChange2(val) {
      this.addForm.protocol = "";
      if (this.selectedItem.deviceType == "Camera") {
        if (val == "V380") {
          this.protocolList = [
            {
              id: 5,
              name: "国标协议",
            },
          ];
        } else {
          this.protocolList = [
            {
              id: 4,
              name: "萤石协议",
            },
            {
              id: 5,
              name: "国标协议",
            },
          ];
        }
      } else {
        this.protocolList = [
          {
            id: 1,
            name: "电信物模型标准规范",
          },
          {
            id: 2,
            name: "移动铠湾规范",
          },
          {
            id: 3,
            name: "移动安消规范",
          },
          {
            id: 6,
            name: "声光规范",
          },
          {
            id: 7,
            name: "珠海慧芯",
          },
        ];
      }
    },
    onChange(val) {
      this.flag = true;
      this.classMarkFlag = true;
      this.classMarkList = [];
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.addForm.classMark = "";
      this.addForm.protocol = "";
      this.selectedItem = this.productList.find((item) => item.id === val);
      if (this.selectedItem.deviceType == "Camera") {
        this.labelName = "序列号";
        this.protocolList = [
          {
            id: 4,
            name: "萤石协议",
          },
          {
            id: 5,
            name: "国标协议",
          },
        ];
      } else {
        this.labelName = "设备MAC";
        this.protocolList = [
          {
            id: 1,
            name: "电信物模型标准规范",
          },
          {
            id: 2,
            name: "移动铠湾规范",
          },
          {
            id: 3,
            name: "移动安消规范",
          },
          {
            id: 6,
            name: "声光规范",
          },
          {
            id: 7,
            name: "珠海慧芯",
          },
        ];
      }

      this.ProductModelPage();
    },
    //   获取产品列表
    async getProductList() {
      const res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.productList = res.data.rows;
    },
    // 获取厂商列表
    async getManufacturerList() {
      const res = await reqManufacturerList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.manufacturerList = res.data.rows;
    },
    // 点击新增
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let { deviceId, imei, productId, classMark, deviceMac, protocol, sn } =
          this.addForm;
        const res = await reqTerminalAdd({
          deviceId,
          deviceMac,
          imei,
          productId,
          classMark,
          protocol,
          sn,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("新增成功");
        this.closeDialog();
        this.$parent.getDataList();
      });
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
      this.flag = false;
      this.addForm = {
        deviceId: "",
        deviceMac: "",
        imei: "",
        productId: "",
        classMark: "",
        protocol: "",
        sn: "",
      };
      this.labelName = "设备MAC";
      // this.classMarflag = false;
    },
  },
};
</script>

<style lang="less" scoped></style>
